<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>煕心健康体检系统</title>
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    body {
      background: #f4f6fa;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    }
    .header {
      height: 60px;
      background: rgb(54, 60, 63);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
    }
    .header .title {
      font-size: 25px;
      font-weight: bold;
      letter-spacing: 2px;
    }
    .header .right_tool {
      font-size: 16px;
    }
    .header .right_tool a {
      color: #fff;
      margin-left: 20px;
      text-decoration: none;
    }
    .layout {
      display: flex;
      margin-top: 60px;
      height: calc(100vh - 60px);
      overflow: hidden;
    }
    .aside {
      width: 220px;
      background: rgb(54, 60, 63);
      color: #fff;
      padding-top: 30px;
      position: fixed;
      top: 60px;
      left: 0;
      bottom: 0;
      z-index: 10;
      border-right: 1px solid #e0e0e0;
    }
    .aside ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .aside li {
      padding: 18px 40px;
      cursor: pointer;
      font-size: 17px;
      transition: background 0.2s;
    }
    .aside li:hover, .aside li.active {
      background: rgba(255,255,255,0.08);
      color: #ffd700;
    }
    .main-content {
      flex: 1;
      margin-left: 220px;
      height: 100%;
      padding: 0;
      overflow: hidden;
    }
    iframe#mainFrame {
      width: 100%;
      height: 100%;
      border: none;
      background: #fff;
      display: block;
    }
    @media (max-width: 900px) {
      .aside {
        width: 120px;
      }
      .main-content {
        margin-left: 120px;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <span class="title">煕心健康体检系统</span>
    <span class="right_tool">
      <a href="#">用户（李白）</a> |
      <a href="#" id="logoutBtn">退出登录</a>
    </span>
  </div>
  <div class="layout">
    <nav class="aside">
      <ul>
        <li class="active" onclick="jumpTo('home.html', 0)">首页</li>
        <li onclick="jumpTo('appointment.html', 1)">体检预约</li>
        <li onclick="jumpTo('list.html', 2)">预约列表</li>
        <li onclick="jumpTo('customer.html', 3)">体检客户查询</li>
      </ul>
    </nav>
    <main class="main-content" style="padding:0;">
      <iframe id="mainFrame" src="../assets/img/welcome.png" style="width:100%;height:100vh;border:none;background:#fff;"></iframe>
    </main>
  </div>
</body>
<script>
  document.getElementById('logoutBtn').onclick = function(e) {
    e.preventDefault();
    window.location.href = 'login.html';
  }
  var asideLis = document.querySelectorAll('.aside ul li');
  var mainFrame = document.getElementById('mainFrame');
  function jumpTo(page, idx) {
    mainFrame.src = page;
    asideLis.forEach(function(li, i) {
      if(i===idx) li.classList.add('active');
      else li.classList.remove('active');
    });
  }
</script>
</html> 